<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item 
				v-for="(item,index) in cartList"
			>
				<view class="flex padding">
					<view class="flex align-center">
						<text 
							class="iconfont icon-gouxuan margin-right"
							:class="item.isCheck?'text-yellow':'text-grey'"
							@click="handleCheck(index)"
						></text>
						<image class="poster margin-right" :src="item.img" mode=""></image>
					</view>
					<view class="flex justify-between info list">
						<view class="">
							{{item.name}}
							<view class="margin-tb-xs">{{item.french}}</view>
							￥{{item.list[item.dropIdx].price}}
						</view>
						<view class="flex flex-direction align-end">
							<view class="edit margin-bottom-xs" @click="handleEdit(item,index)">
								<text class="iconfont icon-bianji"></text>
							</view>
							{{item.list[item.dropIdx].spec}}
							 X 
							{{item.gnum}}
						</view>
					</view>
				</view>
				<template v-slot:right>
					<view class="del" @click="handleDel(index)"><text>删除</text></view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="cu-bar foot bg-white flex" v-if="allInfo.allNum">
			<view class="flex flex-sub padding align-center">
				<text 
					class="iconfont icon-gouxuan margin-right-xs"
					:class="allInfo.allCheck?'text-yellow':'text-grey'"
					@click="handleAllCheck"
				></text>全选
				<view class="margin-left">
					共计:{{allInfo.allPrice}}
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
		<view v-if="!allInfo.allNum" class="flex flex-direction justify-center align-center margin-top padding-top">
			暂无商品，去选购吧~
			<button class="cu-btn bg-brown margin-top">
				<navigator url="../cake/cake" open-type="switchTab">去选购</navigator>
			</button>
		</view>
	</view>
	<CakePopup/>
</template>

<script setup>
import {useStore} from 'vuex'
import { computed, ref } from "vue";
import { onShow,onLoad } from '@dcloudio/uni-app'
const store = useStore()
const cartList = computed(()=>{
	return store.state.cart.cartList
})
//单选
const handleCheck = (idx)=>{
	store.commit('cart/cartCheckMut',idx)
}
const allInfo = computed(()=>{
	return store.getters['cart/allInfo']
})

//全选
const handleAllCheck = ()=>{
	console.log(allInfo.value.allCheck);
	store.commit('cart/cartAllCheckMut',allInfo.value.allCheck)
}

//删除
const handleDel = (idx)=>{
	console.log('删除');
	store.commit('cart/cartDelMut',idx)
}

//编辑
const handleEdit = (item,idx)=>{
	store.commit('cart/popDataMut',item)
	store.commit('cart/popShowMut',true)
	store.commit('cart/editIdxMut',idx)  
}

// 页面访问拦截
const userInfo = computed(()=>{
	return store.state.user.userInfo
})
onShow(()=>{
	if(userInfo.value) return
	uni.showModal({
		title:'登录后访问购物车',
		content:'请登录以便为您提供VIP服务',
		cancelText:'稍后再说',
		confirmText:'立即登录',
		confirmColor:'brown',
		success: ({confirm}) => {
			if(confirm){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			}else{
				uni.switchTab({
					url:'/pages/home/home'
				})
			}
		}
	})
})
</script>

<style lang="scss">
page{
	padding-bottom: 100upx;
	background-color: #fff;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.flex.align-end{
	min-width: 210upx;
}
// .icon-gouxuan{
// 	color: #e7e7e7;
// }
.cu-btn.lg{
	width: 50%;
}
.cover-cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 690upx;
	transform: translateY(-50%);
	border-radius: 10upx;
}
.drop{
	position: relative;
	.drop-list{
		width: 300upx;
		position: absolute;
		top: 60upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover{
			background-color: #e6e6e6;
		}
	}
}
.cu-bar.foot{
	bottom: 100upx;
	z-index: 2;
}
.del{
	height: 100%;
	background-color: #ff5566;
	width: 100upx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
</style>
